import React ,{useState,useEffect}from 'react'
import * as api from './api/index'
import {useDispatch,useSelector} from 'react-redux'
import { Sidebar } from 'react-vant';
function App() {
  const dispatch=useDispatch()
  const [active, setActive] = useState(2);
  useEffect(()=>{
    dispatch(api.get_list())
  },[dispatch])
  const data = useSelector(state=>{
    return state.reducer.data
  })
  const dataChild = useSelector(state=>{
    return state.reducer.dataChild
  })
  console.log(dataChild)
  return (
    <div className='bigbox'>
       <Sidebar
          value={active}
          onChange={(v) => {
            setActive(v);
          }}
        >
          {
            data.map((item,index)=>(
              <Sidebar.Item title={item.name} key={index}>
                  {
                    dataChild.map((val,i)=>(
                      <div key={i} className='box'>
                          <img src={val.img}/>
                          <p>{val.p}</p>
                      </div>
                    ))
                  }
              </Sidebar.Item>
            ))
          }
          {/* <Sidebar.Item title="标签名1" />
          <Sidebar.Item title="标签名2" />
          <Sidebar.Item title="标签名3" /> */}
        </Sidebar>
    </div>
  )
}

export default App